<template>
<div><input type="text" placeholder="输入关键字搜索">
  <table>
    <tr>
      <th>就诊日期</th>
      <th>医生姓名</th>
      <th>诊断结果</th>
      <th>处方信息</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>2022-01-01</td>
      <td>张三</td>
      <td>感冒</td>
      <td>感冒药</td>
      <td><a href="#">详情</a></td>
    </tr>
    <tr>
      <td>2022-02-01</td>
      <td>李四</td>
      <td>头疼</td>
      <td>止疼药</td>
      <td><a href="#">详情</a></td>
    </tr>
    <tr>
      <td>2022-03-01</td>
      <td>王五</td>
      <td>腰疼</td>
      <td>止疼贴</td>
      <td><a href="#">详情</a></td>
    </tr>
  </table></div>
</template>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // 获取所有详情链接
  var detailLinks = document.querySelectorAll("a[href='#']");

  // 为每个详情链接添加点击事件监听器
  detailLinks.forEach(function(link) {
    link.addEventListener("click", function(event) {
      event.preventDefault(); // 阻止默认的链接跳转行为

      // 获取当前行的数据
      var row = link.closest("tr");
      var date = row.cells[0].textContent;
      var doctor = row.cells[1].textContent;
      var diagnosis = row.cells[2].textContent;
      var prescription = row.cells[3].textContent;

      // 创建弹出框元素
      var popup = document.createElement("div");
      popup.className = "popup";
      popup.innerHTML = `
        <h3>就诊记录详情</h3>
        <p>就诊日期: ${date}</p>
        <p>医生姓名: ${doctor}</p>
        <p>诊断结果: ${diagnosis}</p>
        <p>处方信息: ${prescription}</p>
        <button class="close-popup">关闭</button>
      `;

      // 添加关闭按钮的点击事件监听器
      var closeButton = popup.querySelector(".close-popup");
      closeButton.addEventListener("click", function() {
        document.body.removeChild(popup);
      });

      // 将弹出框添加到页面
      document.body.appendChild(popup);
    });
  });
});
</script>

<style>
    body {
      font-family: Arial, sans - serif;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    th,
    td {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    th {
      background-color: #f2f2f2;
    }

    input[type="text"] {
      padding: 6px;
      margin-bottom: 10px;
    }
  </style>